import { _decorator, Component, Graphics, Label, Mask, Node, RichText, size, Tween, tween, UITransform, v3, Vec3 } from 'cc';
import { UserData } from '../Data/UserData';
import ServiceAPI from '../src/api/service.api';
import { Popup } from '../src/ui/page/popup';
import LocalizedLabel from '../Tools/i18n/LocalizedLabel';
import Tools from '../Tools/Tools';
import { GameMgr } from '../Mgr/GameMgr';
import { GameData } from '../Data/GameData';
const { ccclass, property } = _decorator;

@ccclass('Guide')
export class Guide extends Component {
    /** 单例模式 */
    private static _ins: Guide;
    constructor() {
        super();
        Guide._ins = this;
    }
    public static get ins(): Guide {
        if (!Guide._ins) {
            Guide._ins = new Guide();
        }
        return Guide._ins;
    }

    newComerReward: any = null;

    @property(Node)
    cashPanel: Node = null;
    @property(Node)
    propBtn: Node = null;

    @property(Mask)
    private mask: Mask = null;
    @property(Node)
    shade: Node = null;
    @property(UITransform)
    private toucher: UITransform;
    @property(UITransform)
    private pointer: UITransform = null;

    @property(Node)
    diolog: Node = null;
    @property(Node)
    diolog2: Node = null;
    @property(Node)
    diolog3: Node = null;
    @property(Node)
    diolog4: Node = null;
    @property(Label)
    diologLabel1: Label = null
    @property(RichText)
    diologLabel2: RichText = null

    guideindex1: number[] = [3, 3];
    guideindex2: number[] = [3, 3];
    guideindex3: number[] = [4, 3];

    @property(Node)
    boardContainer: Node = null;
    guideTarPos: Vec3 = null;
    @property(Node)
    okButton: Node = null;
    selecOriPos: Vec3 = null;
    uiGuideNode2: Node = null;
    uiGuideNodePos2: Vec3 = null;
    uiGuideNode3: Node = null;
    uiGuideNodePos3: Vec3 = null;

    @property(Node)
    PopPage: Node = null;
    @property(Node)
    home_diolog: Node = null;

    boardeffectTimes: number = 1;
    protected start(): void {
        // log(UserData.data.isCommer)
        if (UserData.data.isCommer) {
            this.runGuide();
        }
    }

    runGuide() {
        if (!UserData.data.isCommer) {
            this.node.active = false;
            return;
        }
        Tween.stopAllByTarget(this.toucher.node);

        tween(this.home_diolog)
            .to(0.5, { position: v3(180, -5, 0) })
            .to(0.5, { position: v3(150, -5, 0) })
            .union()
            .repeatForever()
            .start()

        if (UserData.data.guideRecord == 1) {
            this.guide1();
        } else if (UserData.data.guideRecord == 2) {
            this.guide2();
        } else if (UserData.data.guideRecord == 3) {
            this.guide3();
        } else if (UserData.data.guideRecord == 4) {
            this.guide4();
        } else if (UserData.data.guideRecord == 5) {
            this.guide5();
        } else if (UserData.data.guideRecord == 6) {
            this.guide6();
        } else if (UserData.data.guideRecord == 7) {
            this.guide7()
        }

    }

    drawMaskGraphics(pos1: Vec3, pos2: Vec3, rectWidth: number) {
        const g = this.mask.subComp as Graphics;
        g.clear();

        // 设置线条宽度和填充颜色
        g.lineWidth = 10;
        g.fillColor.fromHEX('#ff0000'); // 红色填充

        const radius = rectWidth / 2; // 圆的半径等于矩形宽度的一半

        // 计算矩形的旋转角度（radians）
        const angle = Math.atan2(pos2.y - pos1.y, pos2.x - pos1.x);

        // 开始绘制
        // 在 pos1 位置绘制圆
        g.circle(pos1.x, pos1.y, radius);
        g.fill(); // 填充圆

        // 在 pos2 位置绘制圆
        g.circle(pos2.x, pos2.y, radius);
        g.fill(); // 填充圆

        // 计算矩形的四个顶点（使用传入的 rectWidth 计算宽度）
        const halfWidth = rectWidth / 2;
        const offsetX = Math.cos(angle) * halfWidth;
        const offsetY = Math.sin(angle) * halfWidth;

        const topLeft = new Vec3(pos1.x - offsetY, pos1.y + offsetX, 0);
        const topRight = new Vec3(pos2.x - offsetY, pos2.y + offsetX, 0);
        const bottomLeft = new Vec3(pos1.x + offsetY, pos1.y - offsetX, 0);
        const bottomRight = new Vec3(pos2.x + offsetY, pos2.y - offsetX, 0);

        // 绘制矩形部分，连接两个圆
        g.moveTo(topLeft.x, topLeft.y);
        g.lineTo(topRight.x, topRight.y);
        g.lineTo(bottomRight.x, bottomRight.y);
        g.lineTo(bottomLeft.x, bottomLeft.y);
        g.close(); // 闭合矩形
        g.fill(); // 填充矩形
    }



    guide1() {
        this.home_diolog.active = false;
        this.toucher.node.active = true
        this.diolog.active = true;
        this.diolog.setPosition(v3(0, 0, 0));

        let localizedLabel1 = this.diologLabel1.node.getComponent(LocalizedLabel);
        localizedLabel1.setTextKeyAndOption("guide_text_1");
        let localizedLabel2 = this.diologLabel2.node.getComponent(LocalizedLabel);
        localizedLabel2.setTextKeyAndOption("guide_Rtext_2", 'SUN');

        let guideword1pos = Tools.getPosAToNodeBPoint(v3(-337.5, -337.5, 0), this.boardContainer, this.node);
        let guideword2pos = Tools.getPosAToNodeBPoint(v3(112.5, -337.5, 0), this.boardContainer, this.node);

        let midguidepos = v3((guideword1pos.x + guideword2pos.x) / 2, (guideword1pos.y + guideword2pos.y) / 2, 0);
        this.mask.node.setPosition(midguidepos);
        this.mask.node.getComponent(UITransform).setContentSize(size(550, 100))
        this.shade.setPosition(-midguidepos.x, -midguidepos.y, 0)

        this.drawMaskGraphics(v3(-215, 0, 0), v3(215, 0, 0), 110);


        this.toucher.node.setPosition(guideword1pos);
        tween(this.toucher.node)
            .delay(0.2)
            .to(1, { position: guideword2pos })
            .delay(0.2)
            .to(0.01, { position: guideword1pos })
            .union()
            .repeatForever()
            .start()

    }

    guide2() {
        this.home_diolog.active = false;
        this.toucher.node.active = true
        this.diolog.active = true;
        this.diolog.setPosition(v3(0, 200, 0));
        this.diolog2.active = true;
        this.diologLabel1.node.active = false;

        this.diologLabel2.node.setPosition(0, 0, 0);
        let localizedLabel2 = this.diologLabel2.node.getComponent(LocalizedLabel);
        localizedLabel2.setTextKeyAndOption("guide_Rtext_3", 'ICE');

        let guideword1pos = Tools.getPosAToNodeBPoint(v3(-112.5, 112.5, 0), this.boardContainer, this.node);
        let guideword2pos = Tools.getPosAToNodeBPoint(v3(337.5, -337.5, 0), this.boardContainer, this.node);

        let midguidepos = v3((guideword1pos.x + guideword2pos.x) / 2, (guideword1pos.y + guideword2pos.y) / 2, 0);
        this.mask.node.setPosition(midguidepos);
        this.shade.setPosition(-midguidepos.x, -midguidepos.y, 0)
        this.mask.node.setRotationFromEuler(0, 0, -45);
        this.mask.node.getComponent(UITransform).setContentSize(size(700, 100))
        this.drawMaskGraphics(v3(-300, 0, 0), v3(300, 0, 0), 110);
        // this.drawMaskGraphics(guideword1pos, guideword2pos, 110);
        this.toucher.node.setPosition(guideword2pos);
        tween(this.toucher.node)
            .delay(0.2)
            .to(1, { position: guideword1pos })
            .delay(0.2)
            .to(0.01, { position: guideword2pos })
            .union()
            .repeatForever()
            .start()
    }

    guide3() {
        this.home_diolog.active = false;
        this.toucher.node.active = true
        this.diolog.active = true;
        this.diolog.setPosition(v3(0, 400, 0));
        this.diolog2.active = true;
        this.diologLabel1.node.active = false;

        this.diologLabel2.node.setPosition(0, 0, 0);
        let localizedLabel2 = this.diologLabel2.node.getComponent(LocalizedLabel);
        localizedLabel2.setTextKeyAndOption("guide_Rtext_4", 'DOG');

        let guideword1pos = Tools.getPosAToNodeBPoint(v3(112.5, 337.5, 0), this.boardContainer, this.node);
        let guideword2pos = Tools.getPosAToNodeBPoint(v3(-337.5, 337.5, 0), this.boardContainer, this.node);

        let midguidepos = v3((guideword1pos.x + guideword2pos.x) / 2, (guideword1pos.y + guideword2pos.y) / 2, 0);
        this.mask.node.setPosition(midguidepos);
        this.shade.setPosition(-midguidepos.x, -midguidepos.y, 0)
        this.mask.node.setRotationFromEuler(0, 0, 0);
        this.mask.node.getComponent(UITransform).setContentSize(size(550, 100))
        this.drawMaskGraphics(v3(-215, 0, 0), v3(215, 0, 0), 110);
        // this.drawMaskGraphics(guideword1pos, guideword2pos, 110);
        this.toucher.node.setPosition(guideword1pos);
        tween(this.toucher.node)
            .delay(0.2)
            .to(1, { position: guideword2pos })
            .delay(0.2)
            .to(0.01, { position: guideword1pos })
            .union()
            .repeatForever()
            .start()

    }

    guide4() {
        this.home_diolog.active = false;
        this.toucher.node.active = false;
        this.diolog.active = true;
        this.diolog.setPosition(v3(0, 200, 0));
        this.diolog.getComponent(UITransform).setContentSize(size(840, 600));
        this.diolog2.active = false;
        this.diologLabel1.node.active = true;
        this.diologLabel1.node.setPosition(0, 100, 0);
        let localizedLabel1 = this.diologLabel1.node.getComponent(LocalizedLabel);
        localizedLabel1.setTextKeyAndOption("guide_text_5");
        this.diologLabel2.node.setPosition(0, -50, 0);
        let localizedLabel2 = this.diologLabel2.node.getComponent(LocalizedLabel);
        localizedLabel2.setTextKeyAndOption("guide_Rtext_6");
        this.mask.node.setPosition(0, 0, 0);
        this.shade.setPosition(0, 0, 0);
        this.okButton.active = true;
    }

    tempCloseGuide() {
        // console.log(UserData.data.guideRecord);
        this.node.active = false;
    }

    async guide5() {
        let config = await ServiceAPI.GetNewComerReward(UserData.data.userId)
        console.log(config);

        console.log("新人奖励：", config);
        if (!config) {
            GameMgr.ins.passLevel();
            this.node.active = true;
            Guide.ins.completeCurGuide(6)
        } else {
            await Popup.Newcomerpage(config);
        }
        if (GameData.data.withdrawConfig) {
            this.home_diolog.active = true;
        }

        tween(this.home_diolog)
            .to(0.5, { position: v3(180, -5, 0) })
            .to(0.5, { position: v3(150, -5, 0) })
            .union()
            .repeatForever()
            .start()
    }

    guide6() {
        this.toucher.node.active = true
        this.diolog.active = false;
        this.diolog3.active = true;
        let midguidepos = Tools.getNodeAToNodeBPoint(this.cashPanel, this.node).add(v3(-10, 0, 0));
        this.diolog3.setPosition(-128, midguidepos.y - 300, 0);
        this.mask.node.setPosition(midguidepos);
        this.shade.setPosition(-midguidepos.x, -midguidepos.y, 0);
        this.mask.node.setRotationFromEuler(0, 0, 0);
        this.mask.node.getComponent(UITransform).setContentSize(size(400, 120));

        this.drawMaskGraphics(v3(-190, 0, 0), v3(190, 0, 0), 110);

        this.toucher.node.setPosition(midguidepos);
        tween(this.toucher.node)
            .to(0.2, { scale: v3(1.1, 1.1, 1) })
            .to(0.2, { scale: v3(1, 1, 1) })
            .union()
            .repeatForever()
            .start();

    }

    async guide7() {
        this.toucher.node.active = true
        this.diolog.active = false;
        this.diolog3.active = false;
        this.diolog4.active = true;
        let midguidepos = Tools.getNodeAToNodeBPoint(this.propBtn, this.node);
        this.mask.node.setPosition(midguidepos);
        this.shade.setPosition(-midguidepos.x, -midguidepos.y, 0);
        this.mask.node.setRotationFromEuler(0, 0, 0);
        this.mask.node.getComponent(UITransform).setContentSize(size(120, 120));

        this.toucher.node.setPosition(midguidepos);
        tween(this.toucher.node)
            .to(0.2, { scale: v3(1.2, 1.2, 1) })
            .to(0.2, { scale: v3(1, 1, 1) })
            .union()
            .repeatForever()
            .start();
        if (GameData.data.withdrawConfig) {
            this.home_diolog.active = true;
        }
        tween(this.home_diolog)
            .to(0.5, { position: v3(180, -5, 0) })
            .to(0.5, { position: v3(150, -5, 0) })
            .union()
            .repeatForever()
            .start()
    }

    completeCurGuide(record) {
        UserData.data.guideRecord = record;
        // console.log(UserData.data.guideRecord);

        this.runGuide();
        // if (UserData.data.guideRecord >= 7) {
        //     UserData.data.isCommer = false;
        // }
    }

}